const e=`<!--
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/transfer/default-transfer.vue
-->
<template>
  <s-form label-width="8em" colon="：">
    <s-form-item label="穿梭框主题">
      <s-radio-group v-model="options.theme" :options="themeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="文本排列方向">
      <s-radio-group v-model="options.align" :options="alignList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否可筛选">
      <s-radio-group v-model="options.filter" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否无边框">
      <s-radio-group v-model="options.borderless" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否只读">
      <s-radio-group v-model="options.readonly" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否禁用">
      <s-radio-group v-model="options.disabled" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="穿梭框示例">
      <s-transfer
        v-model="options.value"
        width="40em"
        :options="list"
        :filter="options.filter"
        :multiple="options.multiple"
        :theme="options.theme"
        :align="options.align"
        :borderless="options.borderless"
        :readonly="options.readonly"
        :disabled="options.disabled"
      >
        <template #header="{ position }">
          {{ position === "left" ? "来源列表" : "目标列表" }}
        </template>
        <template #footer="{ position }">
          {{ position === "left" ? "请选择来源数据" : "请选择目标数据" }}
        </template>
        <template #option="{ label, value }">{{ label }}（{{ value }}）</template>
      </s-transfer>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  TRANSFER_THEME_DEFAULT,
  TRANSFER_THEME_LABEL,
  TRANSFER_THEME_OPTIONS,
  TEXT_ALIGN_DEFAULT,
  TEXT_ALIGN_LABEL,
  TEXT_ALIGN_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultTransfer extends Vue {
  /**
   * @description: 主题列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = TRANSFER_THEME_OPTIONS.map((theme) => ({
    value: theme,
    label: TRANSFER_THEME_LABEL.get(theme),
  }));

  /**
   * @description: 排列方向列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly alignList = TEXT_ALIGN_OPTIONS.map((align) => ({
    value: align,
    label: TEXT_ALIGN_LABEL.get(align),
  }));

  /**
   * @description: 是否列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly isOrNotList = [
    { value: true, label: "是" },
    { value: false, label: "否" },
  ];

  // 穿梭框选项列表
  readonly list = [
    { label: "市辖区", value: "320101" },
    { label: "玄武区", value: "320102" },
    { label: "秦淮区", value: "320104", disabled: true },
    { label: "建邺区", value: "320105" },
    { label: "鼓楼区", value: "320106" },
    { label: "浦口区", value: "320111" },
    { label: "栖霞区", value: "320113" },
    { label: "雨花台区", value: "320114" },
    { label: "江宁区", value: "320115" },
    { label: "六合区", value: "320116" },
    { label: "溧水区", value: "320117" },
    { label: "高淳区", value: "320118" },
  ];

  /**
   * @description: 穿梭框配置项
   * @private
   * @type {Object}
   */
  options = {
    theme: TRANSFER_THEME_DEFAULT, // 穿梭框主题
    align: TEXT_ALIGN_DEFAULT, // 文本排列方向
    filter: false, // 是否可以筛选
    multiple: false, // 是否多选
    borderless: false, // 是否无边框
    readonly: false, // 是否只读
    disabled: false, // 是否禁用
    value: ["320102", "320113"], // 穿梭框选中值
  };
}
<\/script>
`;export{e as default};
